<template>
  <div class="page-my-customer">
      <div class="header-fixed " :style="{background: 'url('+ mcbg1 +') center/100%'}">
          <div><img :src="myImg" class="icon-cust-head" />{{ myName }}</div>
          <div>交易<span class="color-yellow">/全部客户</span> {{ businessFriendCount }}<span class="color-yellow">/{{ friendCount }}</span></div>
      </div>
      <div class="no-one" v-show="businessFriendList.length == 0">
          <img :src="nooneimg">
          <p>还没有相关订单</p>
      </div>

      <!-- 好友列表 -->
      <div class="have-one" v-show="businessFriendList.length != 0" id="wrapper1" style="height: 100%;">
          <div id="scroller1" >
              <div class="cust-wrap" v-bind:key="index" @click="popshow(item.investorId)" v-for="(item,index) in businessFriendList">
                 <table>
                    <tr>
                        <td style="vertical-align: middle;">
                          <img v-if="item.userImg!=null && item.userImg!=''" v-bind:src="item.userImg" class="icon-cust-head">
                          <img v-else v-bind:src="customerImg" class="icon-cust-head">

                          <span class="cust-user">{{ item.realname }}（{{ item.mobile }}）</span>
                        </td>
                        <td><div :class="{'invest':item.status == '1','not-invest':item.status == '0'}">{{ ['注册未投资','已投资'][item.status] }}</div></td>
                    </tr>
                    <tr>
                        <td><div class="txtname">累计佣金</div></td>
                        <td><span class="txtnumber">{{ (item.totalBenefit).toFixed(2) }}元</span><img :src="custnext" class="icon-cust-next"></td>
                    </tr>
                 </table>
              </div>
              <div class="scroll-loader" v-show="businessFriendList.length >= 10">{{ txtLoad1 }}</div>
          </div>
      </div>


      <!-- 好友详情 -->
      <mt-popup v-model="popupVisible" position="bottom" class="customer_detail">
        <div class="pop-wrap">
          <div class="pop-header" >
            <div class="h-left">
                <div class="cust-detailimg"><img :src="userDetail.avator" ></div>
                <h1>{{ userDetail.realname }}（{{ userDetail.mobile }}）</h1>
                <p>注册时间：{{ userDetail.createTime }}</p>
            </div>
            <div class="btn-close" @click="closePop">关闭</div>
          </div>
          <div id="wrapper2">
              <div id="scroller2">
                  <div class="total" style="border-bottom-width: 1px;">佣金总计：<span>{{ userDetail.totalAmount }}元</span></div>
                  <table class="invest-list" v-bind:key="index" v-for="(item,index) in userDetailList" style="border-bottom-width:1px;">
                     <tr>
                        <td class="color333" :class="{ 'color999': item.commissionStatus == -1}">投资提成</td>
                        <td class="txtnumber">{{ item.amount }}元</td>
                     </tr>
                     <tr>
                        <td class="colorb7">{{ item.time }}</td>
                        <td><div class="txtmsg" :class="{'txtmsg-1':item.commissionStatus == -1,'txtmsg-2':item.commissionStatus == 0,'txtmsg-3':item.commissionStatus == 1,'txtmsg-4':item.commissionStatus == 2 }">{{ ['已失效','待生效','待发放','已入账'][item.commissionStatus +1] }}</div></td>
                     </tr>
                  </table>
                  <div class="scroll-loader" v-show="userDetailList.length >= 10">{{ txtLoad2 }}</div>
              </div>
          </div>
          <div class="footer-fixed" @click="closePop()"><img :src="iClose"></div>
        </div>
      </mt-popup>

  </div>
</template>
<script>
import { Popup } from "mint-ui";
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei1 = null;
var scrollHei2 = null;
export default {
  name: "",
  data() {
    return {
      name: "my_customer",
      msg: "welcome to my customer",
      mcbg1: require("@/public/imgs/invite/mc-bg-1.png"),
      mcbg2: require("@/public/imgs/invite/mc-bg-2.png"),
      iClose: require("@/public/imgs/invite/i-close.png"),
      custnext: require("@/public/imgs/invite/cust-next.png"),
      nooneimg: require("@/public/imgs/invite/noone-img.png"),
      popupVisible: false,
      sessionid: "",
      txtLoad1: "上拉加载更多...",
      txtLoad2: "上拉加载更多...",
      myName: "",
      myImg: require("@/public/imgs/invite/cust-head.png"),
      friendCount: 0,
      businessFriendCount: 0,
      businessFriendList: [],
      pageIndex1: 1,
      pageIndex2: 1,
      pageSize: 10,
      loadMoreFlag1: false,
      loadMoreFlag2: false,
      customerList: [],
      investorId: "",
      userDetail: {
        realname: "",
        totalAmount: "",
        mobile: "",
        createTime: "",
        avator: require("@/public/imgs/invite/cust-head.png")
      },
      userDetailList: [],

      AT2: "",

      default1Img: require("@/public/imgs/invite/cust-head.png"),
      customerImg: require("@/public/imgs/invite/cust-head.png"),
      customerDetailImg: require("@/public/imgs/invite/cust-head.png")
    };
  },
  created() {
    // 这里主要是获取sessionid
    let self = this;
    let sid = self.Uitis.GetLocationParams("sessionid");

    // 判断地址栏是否代入了sessionid,没有则从客户端这边获取
    if (sid != null) {
      self.sessionid = sid;
    } else {
      var UserInfo = self.Uitis.getInfo();
      UserInfo.then(res => {
        if (res.uId !== "") {
          self.sessionid = res.sessionid;
        }
      });
    }
  },
  mounted() {
    var self = this,
      scroller1 = document.querySelector("#scroller1"),
      scrollHei1 = document.querySelector("#scroller1").clientHeight,
      hei1 =
        scrollHei1 > window.innerHeight ? window.innerHeight - scrollHei1 : 0;

    Transform(scroller1, true);
    var AT1 = new AlloyTouch({
      touch: "#wrapper1", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller1"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          if (self.loadMoreFlag1) {
            self.txtLoad1 = "数据加载中...";
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        } else {
          if (self.loadMoreFlag1) {
            self.txtLoad1 = "上拉加载更多...";
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag1) {
            self.inviteUser(function() {
              self.$nextTick(function() {
                var scrollHei1 = document.querySelector("#scroller1")
                  .clientHeight;
                var hei1 =
                  scrollHei1 + 80 > window.innerHeight
                    ? window.innerHeight - scrollHei1 - 85
                    : 0;
                AT1.min = hei1;
              });
            });
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        }
      }
    });
    // 加载更多
    self.inviteUser(function() {
      self.$nextTick(function() {
        var scrollHei = document.querySelector("#scroller1").clientHeight;
        var hei =
          scrollHei + 70 > window.innerHeight
            ? window.innerHeight - scrollHei - 75
            : 0;
        AT1.min = hei;
        if (self.loadMoreFlag1) {
          self.txtLoad1 = "上拉加载更多数据...";
        } else {
          self.txtLoad1 = "没有更多数据了...";
        }
      });
    });

    //客户分利详情
    var scroller2 = document.querySelector("#scroller2"),
      scrollHei2 = document.querySelector("#scroller2").clientHeight,
      hei2 =
        scrollHei2 > window.innerHeight ? window.innerHeight - scrollHei2 : 0;

    Transform(scroller2, true);

    this.AT2 = new AlloyTouch({
      touch: "#wrapper2", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller2"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          if (self.loadMoreFlag2) {
            self.txtLoad2 = "数据加载中...";
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        } else {
          if (self.loadMoreFlag2) {
            self.txtLoad2 = "上拉加载更多...";
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag2) {
            self.loadMoreUserDetail(function() {
              self.$nextTick(function() {
                var scrollHei2 = document.querySelector("#scroller2")
                  .clientHeight;
                var hei2 =
                  scrollHei2 + 80 > window.innerHeight
                    ? window.innerHeight - scrollHei2 - 85
                    : 0;
                console.log(scrollHei2);
                this.AT2.min = hei2;
                if (self.loadMoreFlag2) {
                  self.txtLoad2 = "上拉加载更多...";
                } else {
                  self.txtLoad2 = "没有更多数据了...";
                }
              });
            });
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        }
      }
    });
  },
  methods: {
    popshow(investorId) {
      var self = this;
      //客户详情
      this.popupVisible = true;
      this.investorId = investorId;
      this.userDetailList = [];

      this.pageIndex2 = 1;
      // 获取数据后回掉
      self.loadMoreUserDetail(function() {
        self.$nextTick(function() {
          var scrollHei2 = $("#scroller2").height(),
            $wrapperHei = $("#wrapper2").height(),
            $rHei = window.innerHeight - $wrapperHei;

          var hei2 = scrollHei2 > $wrapperHei ? $wrapperHei - scrollHei2 : 0;

          this.AT2.min = hei2;
          if (this.loadMoreFlag2) {
            this.txtLoad2 = "上拉加载更多数据...";
          } else {
            this.txtLoad2 = "没有更多数据了...";
          }
        });
      });
    },
    closePop() {
      //关闭弹框
      this.popupVisible = false;
    },
    loadMoreUserDetail(fn) {
      //滑动加载更多
      var self = this;
      // 定义请求
      // var req = this.$http.get("https://www.easy-mock.com/mock/5a29fd032763647eeca68bf6/example/mock#!method=get",{
      var req = this.$http.get(this.Interface.getUserDetail, {
        params: {
          investorId: this.investorId,
          sessionid: this.sessionid,
          pageNo: this.pageIndex2,
          pageSize: this.pageSize
        }
      });

      // 处理请求
      req.then(res => {
        if (res.data.success) {
          var result = res.data.data;

          var uImg = result.userImg;
          self.userDetail.realname = result.realname;
          self.userDetail.mobile = result.mobile;
          self.userDetail.createTime = result.createTime;
          self.userDetail.totalAmount = result.totalAmount;

          //点击客户详情的头像
          if (uImg != null && uImg != "") {
            self.userDetail.avator = uImg;
          }

          var dList = result.list;
          if (dList != null && dList != "" && dList.length != 0) {
            this.pageIndex2 = this.pageIndex2 + 1;
            this.loadMoreFlag2 = dList.length < 10 ? false : true; //是否有下一页
            this.userDetailList = this.userDetailList.concat(dList);
          }

          // 如果有回掉函数，则执行
          if (fn) fn();
        } else {
          // 错误消息提醒
          var err_msg = res.data.data.error_msg;
          this.Toast(err_msg);
        }
      });
    },
    inviteUser(callback) {
      //我的客户
      var self = this;
      // 模拟的数据
      var $Url =
        "https://www.easy-mock.com/mock/5a0be9a718895717df604de4/swagger/test";
      // 定义请求
      var req = this.$http.get(self.Interface.getInviteUser, {
        // var req = this.$http.get($Url, {
        params: {
          sessionid: self.sessionid,
          pageNo: self.pageIndex1,
          pageSize: self.pageSize
        }
      });

      // 处理请求
      req.then(res => {
        var data = res.data;
        if (data.success) {
          let result = res.data.data;
          self.myName = result.realname;
          self.friendCount = result.friendCount;
          self.businessFriendCount = result.businessFriendCount;
          //  判断是否有头像
          var uImg = result.userImg;
          if (uImg != null && uImg != "") {
            self.myImg = uImg;
          }

          // 好友列表数组
          var bFriendsList = self.businessFriendList;
          var bfList = result.businessFriendList;

          if (bfList != null && bfList != "" && bfList.length != 0) {
            self.loadMoreFlag1 = bfList.length < 10 ? false : true;
            self.pageIndex1 = self.pageIndex1 + 1;

            bfList.forEach(item => {
              bFriendsList.push(item);
            });
          }

          self.businessFriendList = bFriendsList;

          // 计算高度
          if (callback) callback();
        } else {
          this.Toast(data.data.error_msg);
        }
      });
    }
  }
};
</script>
<style lang="less">
@color333: #333;
@color666: #666;
@color999: #999;
html,
body {
  height: 100%;
}
.page-my-customer {
  height: 100%;
  background: #f4f4f4;
  box-sizing: border-box;
  position: relative;
  .header-fixed {
    position: fixed;
    width: 100%;
    height: 122px;
    left: 0;
    top: 0;
    padding: 0 40px 0 32px;
    font-size: 30px;
    box-sizing: border-box;
    color: #fff;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .no-one {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    img {
      width: 154px;
      height: 215px;
    }
    p {
      font-size: 27px;
      color: @color999;
      margin-top: 64px;
    }
  }
  #wrapper1 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding-top: 152px;
    position: absolute;
    box-sizing: border-box;
  }
  #wrapper2 {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
  }
  #scroller1 {
    background: #f4f4f4;
  }
  .cust-wrap {
    margin: 0 30px 30px;
    padding: 35px 29px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    table {
      width: 100%;
      tr {
        &:first-child td {
          padding-bottom: 40px;
        }
        td:last-child {
          text-align: right;
        }
        .txtname {
          color: @color999;
          font-size: 24px;
        }
        .icon-cust-next {
          width: 10px;
          height: 24px;
          margin-left: 21px;
          vertical-align: baseline;
        }
      }
      .cust-user {
        font-size: 30px;
        color: @color333;
      }
      .txtnumber {
        font-weight: bold;
        color: #f2616d;
        font-size: 30px;
      }
      .invest {
        display: inline-block;
        font-size: 22px;
        height: 30px;
        line-height: 30px;
        padding: 3px;
        border-radius: 3px;
        background: #f2616d;
        color: #fff;
      }
      .not-invest {
        display: inline-block;
        font-size: 22px;
        height: 30px;
        line-height: 30px;
        padding: 3px;
        border-radius: 3px;
        background: #5261f7;
        color: #fff;
      }
    }
  }
  .icon-cust-head {
    width: 50px;
    height: 50px;
    margin-right: 24px;
    border-radius: 50%;
  }
  .colorb7 {
    color: #b7b7b7;
  }
  .color999 {
    color: #999 !important;
  }
  .color-yellow {
    color: #e5b673;
  }
  .customer_detail {
    width: 94%;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 55px;
    background: transparent;
    transition: 0.3s ease-in;
    border-radius: 10px 10px 0 0;
    .pop-wrap {
      width: 100%;
      height: 100%;
      background: #f4f4f4;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      border-radius: 10px 10px 0 0;
    }
    .pop-header {
      width: 100%;
      padding: 0 40px 0 32px;
      font-size: 30px;
      box-sizing: border-box;
      color: #fff;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 150px;
      padding: 0 39px 0 36px;
      background: url("../../public/imgs/invite/mc-bg-2.png") center no-repeat;
      background-size: cover;

      .h-left {
        padding-left: 100px;
        position: relative;
        .cust-detailimg {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          overflow: hidden;
        }
        h1 {
          font-size: 30px;
          color: #e5b673;
          margin-bottom: 16px;
        }
        p {
          font-size: 24px;
          color: #ababab;
        }
      }
      .btn-close {
        font-size: 28px;
        color: #fff;
      }
    }
    .total {
      padding: 25px 29px;
      border-bottom: 1px solid #ccc;
      font-size: 28px;
      background: #fff;
      color: #808080;
      span {
        color: #f2616d;
      }
    }
    .invest-list {
      width: 100%;
      padding: 35px 25px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;
      background: #fff;
      tr {
        &:first-child td {
          font-size: 30px;
          padding-bottom: 12px;
        }
        &:last-child td {
          font-size: 24px;
        }
        td:last-child {
          text-align: right;
        }
        .txtnumber {
          font-weight: bold;
          color: #f2616d;
        }
      }
      .txtmsg {
        width: 95px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        border-radius: 3px;
        font-size: 22px;
      }
      .txtmsg-1 {
        background: #f4f4f4;
        color: @color999;
      }
      .txtmsg-2 {
        background: #ccc;
        color: #fff;
      }
      .txtmsg-3 {
        background: #f4f4f4;
        color: @color999;
      }
      .txtmsg-4 {
        background: #e5b673;
        color: #fff;
      }
    }
    .footer-fixed {
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: center;
      background: #ccc;
      img {
        width: 30px;
      }
    }
  }
  .scroll-loader {
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: #999;
    margin-top: 16px;
  }
}
</style>
